<template>
<div class="sousuo" style="width:75%;margin:50px auto;height:500px;">
  <el-select v-model="value" placeholder="请选择你要查询的类型" style="margin-bottom:50px;">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      class="conter">
    </el-option>
  </el-select>
  <el-input v-model="input" placeholder="请输入商品名/账号/订单号获取内容"></el-input>
  <el-button slot="reference" type="primary" style="margin-top:30px;" @click="btn(input)">搜索</el-button>
  <div class="show" :data="list">
      <div ref="product" id="product" style="display:none">
        <div v-for="item in list" :key="item.id">
        <ul>
          <li>姓名：{{item.name}}</li>
          <li>图片：
              <img
                style="max-width: 100px; max-height: 100px;" :src="item.coverImg | convertImg"/>
          </li>
          <li>价格：{{item.price}}</li>
          <li>简介：{{item.descriptions}}</li>
          <li>
              <el-button type="primary" @click="edit(item._id)">修改</el-button>
              <el-button type="danger" @click="sc(item._id)">删除</el-button>
          </li>
        </ul>
        </div>
      </div>
      <div ref="order" id="order" style="display:none">
        <div v-for="item in list" :key="item.id">
            <ul>
              <li>订单号：{{item.no}}</li>
              <li>姓名：{{item.receiver}}</li>
              <li>地址：{{item.regions+item.address}}</li>
              <li>价钱：{{item.price}}</li>
              <li>是否付款：{{item.isPayed}}</li>
              <li>
                  <el-button type="danger" @click="ddsc(item._id)">删除</el-button>
              </li>
            </ul>
        </div>
      </div>
      <div ref="user" id="user" style="display:none">
        <div v-for="item in list" :key="item.id">
        <ul>
              <li>账号：{{item.userName}}</li>
              <li>昵称：{{item.nickName}}</li>
              <li>id：{{item._id}}</li>
              <li>
                  <el-button type="primary" @click="yhedit(item._id)">修改</el-button>
                  <el-button type="danger" @click="yhsc(item._id)">删除</el-button>
              </li>
            </ul>
          </div>
      </div>
  </div>
</div>
</template>
<script>
import {orderSou,userSou,productSou} from '../api/sousuo'
import {Delete} from '../api/products'
import {orderDelete} from '../api/order'
import {yhDelete} from '../api/yonghu'
export default {
data() {
      return {
        options: [{
          value: '1',
          label: '商品'
        }, {
          value: '2',
          label: '用户'
        }, {
          value: '3',
          label: '订单'
        }],
        value: '',
        input:"",
        list:[]
      }
    },
    methods:{
      async btn(input){
        this.list = []
        if(this.value == "1"){
          this.ProductSou(this.input)
          this.input = ''
        }else if(this.value == "2"){
          this.UserSou(input)
          this.input = ''
        }else{
          this.OrderSou(input)
          this.input = ''
        }
      },
      async UserSou(userName){
        const use = await userSou({userName})
        console.log(use.data.users)
        this.list = use.data.users
        this.$refs.product.style.display = 'none'
        this.$refs.order.style.display = 'none'
        this.$refs.user.style.display = 'block'
      },
      async OrderSou(no){
        const ose = await orderSou({no})
        this.list = ose.data.orders
        // console.log(ose)
        this.$refs.product.style.display = 'none'
        this.$refs.order.style.display = 'block'
        this.$refs.user.style.display = 'none'
        // this.orderlist = ose
      },
      async ProductSou(name){
        const pse = await productSou({name})
        console.log(pse.data.products)
          // use.data.type = "product"
        this.list = pse.data.products
        this.$refs.product.style.display = 'block'
        this.$refs.order.style.display = 'none'
        this.$refs.user.style.display = 'none'
      },
      edit(id){
        this.$router.push({
          name:"edit",query: {
          id
        }
        })
      },
      yhedit(id){
        this.$router.push({
          name:"yhEdit",query: {
          id
        }
        })
      },
      sc(id){
        console.log(id)
        this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      }).then(() => {
          console.log("111")
          Delete(id).then(res => {
            console.log(res);
            this.$router.go(0);
          });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(err => {
          console.log(err)
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
      },
      yhsc(id){
        this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      }).then(() => {
          console.log("111")
          yhDelete(id).then(res => {
            console.log(res);
            this.$router.go(0);
          });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(err => {
          console.log(err)
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
      },
      ddsc(id){
        this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      }).then(() => {
          console.log("111")
          orderDelete(id).then(res => {
            console.log(res);
            this.$router.go(0);
          });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(err => {
          console.log(err)
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
      }
    },
    filters:{
      convertImg(img) {
        if(img){
return img.startsWith("http")
        ? img
        : "http://api.cat-shop.penkuoer.com" + img;
        } else {
          return ''
        }

    }
    }
}
</script>
<style>
ul li{
  list-style:none;
  margin: 10px auto;
}
#user ul{
  border: 2px solid #147258;
  margin: 50px auto;
  line-height:50px;
  text-align: left;
  border-radius: 20px
}
#product ul{
  border: 2px solid #147258;
  margin: 50px auto;
  line-height:30px;
  text-align: left;
  border-radius: 20px;
}
#order ul{
  border: 2px solid #147258;
  margin: 50px auto;
  line-height:50px;
  text-align: left;
  border-radius: 20px
}
</style>
